﻿@{
    ViewData["Title"] = "编辑配置信息";
    Layout = "~/Views/Shared/_LayoutNone.cshtml";
}
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 类型</label>
        <div class="layui-input-block">
            <select id="type_id" name="type_id" lay-verify="required" lay-filter="select_type_id">
                <option value="">选择类型</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 选项名称</label>
        <div class="layui-input-block">
            <input type="text" id="info_name" name="info_name" maxlength="255" lay-verify="required" placeholder="请输入选项名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type1">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <input type="text" id="info_value" name="info_value" maxlength="255" placeholder="请输入请输入选项值（短内容）" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type2" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <textarea id="edit_content" style="display: none; " placeholder="请输入选项值（长内容）"></textarea>
        </div>
    </div>
    <div class="layui-form-item" id="type3" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <div class="layui-upload-drag" id="cover-upload-drag">
                <i class="layui-icon"></i>
                <p>点击上传，或将图片拖拽到此处</p>
                <label style="color:#dc2828">*图片尺寸建议:500×500(px)以上</label>
            </div>
        </div>
    </div>
    <div class="layui-form-item" id="type4" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <input type="checkbox" lay-verify="required" lay-filter="switch_is_open" id="switch_is_open" name="switch_is_open" lay-skin="switch" lay-text="开启|关闭">
            <input type="hidden" name="is_open" id="is_open" value="true" />
        </div>
    </div>
    <div class="layui-form-item" id="type5" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 链接地址</label>
        <div class="layui-input-block">
            <input type="text" id="ext_link" name="ext_link" maxlength="255" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" id="type6" style="display: none;">
        <label class="layui-form-label"><span style="color:red">*</span> 选项值</label>
        <div class="layui-input-block">
            <textarea id="ext_desc" name="ext_desc" placeholder="请输入代码" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span style="color:red">*</span> 排序</label>
        <div class="layui-input-block">
            <input type="text" id="sort_num" name="sort_num" lay-verify="required" placeholder="请输入排序" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">说明</label>
        <div class="layui-input-block">
            <textarea disabled="disabled" id="info_tips" name="info_tips" placeholder="请输入说明" autocomplete="off" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="hidden" id="info_path" name="info_path" value="" />
        <input type="hidden" id="setting_info_id" name="setting_info_id" value="@ViewContext.HttpContext.Request.Query["id"]" />
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit" value="确认添加">
        <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit" value="确认编辑">
    </div>

</div>

<script src="~/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' // 静态资源所在路径
    }).extend({
        index: '/lib/index' // 主入口模块
    }).use(['index', 'layedit', 'form', 'table', 'upload', 'element', 'laydate'], function () {
        var $ = layui.$
            , table = layui.table
            , element = layui.element
            , upload = layui.upload
            , form = layui.form
            , admin = layui.admin
            , laydate = layui.laydate
            , layedit = layui.layedit;

        // 初始化编辑器
        var content_edit = layedit.build('edit_content');
        // 上传参数设置
        layedit.set({
            uploadImage: {
                url: '/upload/uploadimg?catalogue=service&open_breviary=true',
                accept: 'image',
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp|jpeg',
                size: 1024 * 10 * 2,  // 图片最大支持20M
                done: function (data) {
                    // console.log(`data=${JSON.stringify(data)}`);
                }
            },
            uploadVideo: {
                url: '/upload/uploadfile',
                accept: 'video',
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: 1024 * 10 * 10, // 视频最大支持100M
                done: function (data) {
                    // console.log(`data=${JSON.stringify(data)}`);
                }
            }
            , uploadFiles: {
                url: '/upload/uploadfile',
                accept: 'file',
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                acceptMime: 'file/*',
                size: 1024 * 10 * 10, // 文件最大支持100M
                autoInsert: true,
                done: function (data) {
                    // console.log(`data=${JSON.stringify(data)}`);
                }
            }
            , rightBtn: {
                type: "layBtn",
                customEvent: function (targetName, event) {
                }
            }
            , backDelImg: true
            , devmode: true
            , autoSync: true
            , onchange: function (content) {
                // console.log(`content=${JSON.stringify(content)}`);
            }
            , codeConfig: {
                hide: false,
                default: 'javascript',
                encode: true
                , class: 'layui-code'
            }
            , quote: {
                style: ['Content/css.css'],
            }
            , customlink: {
                title: '自定义链接'
                , href: location.pathname
                , onmouseup: ''
            }
            //, facePath: ''
            , devmode: true
            , videoAttr: 'preload="none" '
            , height: '500px'
        });

        // 上传图片至服务端
        upload.render({
            elem: '#cover-upload-drag'
            ,headers: {
                'RequestVerificationToken': csrfToken
            }
            , url: '/upload/uploadimg?catalogue=service&open_breviary=true'
            , done: function (res) {
                // console.log(`res=${JSON.stringify(res)}`);
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#cover-upload-drag").html("<img style='max-width:200px;max-height:150px' src='" + res.data.src + "'>");
                $("#info_path").val(res.path);
            }
        });

        // 监听指定开关
        form.on('switch(switch_is_open)', function (data) {
            if (this.checked) {
                $("#is_open").val(true);
            } else {
                $("#is_open").val(false);
            }
        });

        // 监听类型
        form.on('select(select_type_id)', function (data) {
            if (data.value == 1) {
                $("#type1").show();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 2) {
                $("#type1").hide();
                $("#type2").show();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 3) {
                $("#type1").hide();
                $("#type2").hide();
                $("#type3").show();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 4) {
                $("#type1").hide();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").show();
                $("#type5").hide();
                $("#type6").hide();
            } else if (data.value == 5) {
                $("#type1").show();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").show();
                $("#type6").hide();
            } else if (data.value == 6) {
                $("#type1").show();
                $("#type2").hide();
                $("#type3").hide();
                $("#type4").hide();
                $("#type5").hide();
                $("#type6").show();
            }
        });

        // 默认加载
        $(function () {
            var setting_info_id = $("#setting_info_id").val();
            loading = layer.load(2, {
                shade: [0.2, '#000']
            });

            admin.req({
                url: '/settinginfo/details?id=' + setting_info_id
                , data: null
                , done: function (res) {
                    // console.log(`res=${JSON.stringify(res)}`)
                    layer.close(loading);
                    $("#info_name").val(res.data.info_name);
                    $("#parent_id").val(res.data.parent_id);
                    $("#sort_num").val(res.data.sort_num);
                    $("#is_open").val(res.data.is_open);
                    $("#switch_is_open").prop("checked", res.data.is_open);
                    $("#info_value").val(res.data.info_value);
                    $("#ext_link").val(res.data.ext_link);
                    $("#ext_desc").val(res.data.ext_desc);
                    $("#info_tips").val(res.data.info_tips);
                    if (res.data.info_path) {
                        $("#cover-upload-drag").html("<img style='max-width:200px;max-height:150px' src='" + res.data.show_info_path + "'>");
                    }

                    if (res.data.type_id == 1) {
                        $("#type1").show();
                        $("#type2").hide();
                        $("#type3").hide();
                        $("#type4").hide();
                        $("#type5").hide();
                        $("#type6").hide();
                    } else if (res.data.type_id == 2) {
                        $("#type1").hide();
                        $("#type2").show();
                        $("#type3").hide();
                        $("#type4").hide();
                        $("#type5").hide();
                        $("#type6").hide();
                    } else if (res.data.type_id == 3) {
                        $("#type1").hide();
                        $("#type2").hide();
                        $("#type3").show();
                        $("#type4").hide();
                        $("#type5").hide();
                        $("#type6").hide();
                    } else if (res.data.type_id == 4) {
                        $("#type1").hide();
                        $("#type2").hide();
                        $("#type3").hide();
                        $("#type4").show();
                        $("#type5").hide();
                        $("#type6").hide();
                    } else if (res.data.type_id == 5) {
                        $("#type1").show();
                        $("#type2").hide();
                        $("#type3").hide();
                        $("#type4").hide();
                        $("#type5").show();
                        $("#type6").hide();
                    } else if (res.data.type_id == 6) {
                        $("#type1").hide();
                        $("#type2").hide();
                        $("#type3").hide();
                        $("#type4").hide();
                        $("#type5").hide();
                        $("#type6").show();
                    }

                    // 单独处理
                    if (res.data.setting_info_id == 1406) {
                        $("#type1").show();
                    }

                    // 类型
                    admin.req({
                        url: '/settingtypes/select'
                        , done: function (res2) {
                            $.each(res2.data, function (i, item) {
                                if (item.type_id == res.data.type_id) {
                                    $("#type_id").append("<option value=" + item.type_id + " selected>" + item.type_name + "</option>");
                                }
                                else {
                                    $("#type_id").append("<option value=" + item.type_id + ">" + item.type_name + "</option>");
                                }
                            });
                            layui.form.render('select');
                        }
                    });

                    layedit.setContent(content_edit, res.data.info_content);
                    form.render();
                }
            });
        });

        // 监听提交
        form.on('submit(layuiadmin-app-form-edit)', function (data) {
            data.field.info_content = layedit.getContent(content_edit);
            console.log(`info_content=${layedit.getContent(content_edit) }`)
            var index_close = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            if (data.field.type_id == 2 && !data.field.info_content) {
                layer.msg('请填写内容');
                return false;
            }

            loading = layer.load(2, {
                shade: [0.2, '#000']
            });

            // 提交数据
            admin.req({
                headers: {
                    'RequestVerificationToken': csrfToken
                },
                method: 'POST',
                url: '/settinginfo/edit?id=' + data.field.setting_info_id
                , data: data.field
                , done: function (res) {
                    // console.log(`res=${JSON.stringify(res)}`)
                    layer.close(loading);
                    parent.layui.table.reload('LAY-app-content-list'); // 重载表格
                    if (res.errcode) {
                        layer.open({
                            title: '错误提示'
                            , type: 1
                            , content: '<div style="color: red; padding: 20px; ">' + res.errcode + ':' + res.errmsg + '</div>'
                            , btn: ["确定"]
                        });
                    } else {
                        parent.layer.close(index_close);
                    }
                }
            });
        });
    })
</script>
